<template>
  <el-form :inline="true" :model="activityQuery" :rules="activitySearchRules">

    <el-form-item label="负责人">
      <el-select
          v-model="activityQuery.ownerId"
          placeholder="请选择负责人"
          clearable
          @click="loadOwner">
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="活动名称">
      <el-input v-model="activityQuery.name" placeholder="请输入活动名称" clearable />
    </el-form-item>

    <el-form-item label="开始时间">
      <el-date-picker
          v-model="activityQuery.startTime"
          type="datetime"
          placeholder="请选择开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable/>
    </el-form-item>

    <el-form-item label="结束时间">
      <el-date-picker
          v-model="activityQuery.endTime"
          type="datetime"
          placeholder="请选择结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable/>
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
          v-model="activityQuery.createTime"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSearch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="add">录入市场活动</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table
      :data="activityList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="55" />
    <el-table-column label="负责人">
      <template #default="scope"><!--插槽-->
        {{ scope.row.ownerDO.name }}
      </template>
    </el-table-column>
    <el-table-column property="name" label="活动名称" width="120"/>
    <el-table-column property="startTime" label="开始时间"/>
    <el-table-column property="endTime" label="结束时间"/>
    <el-table-column property="cost" label="活动预算"/>
    <el-table-column property="createTime" label="创建时间"/>
    <el-table-column label="操作" width="230">
      <template #default="scope"><!--插槽-->
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @current-change="page"
      @prev-click="page"
      @next-click="page" />
</template>

<script>
import {doDelete, doGet} from "@/http/httpRequest";
import {messageConfirm, messageTip} from "@/util/util";

export default {

  //注入reload
  inject : ['reload'],

  data() {
    return {
      //定义搜索表单对象，初始值是空
      activityQuery : {},
      //活动列表数据对象，初始值是空
      activityList : [{
        ownerDO : {}
      }],
      //分页时每页显示多少条数据，初始值是0
      pageSize : 0,
      //分页时总共有多少条数据，初始值是0
      total : 0,
      //负责人的下拉列表数据，初始值是空
      ownerOptions : [{}],
      //市场活动搜索表单验证规则
      activitySearchRules : {
        cost : [
          //正则从网上找，或者AI工具上问，找到之后需要测试一下，因为有时候找到的正则有点问题
          { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
        ]
      },
      //市场活动id的数组，初始值是空
      activityIdArray : [],
    }
  },

  mounted() {
    this.getData(1);
  },

  methods : {
    //current表示当前是查第几页
    getData(current) {
      doGet("/api/activity", {
        current : current, //前面的current是参数名，后面的current是参数值
        //搜索：就是带上6个参数去分页查询就可以
        ownerId : this.activityQuery.ownerId,
        name : this.activityQuery.name,
        startTime : this.activityQuery.startTime,
        endTime : this.activityQuery.endTime,
        cost : this.activityQuery.cost,
        createTime : this.activityQuery.createTime
      }).then(resp => {
        if (resp.data.code === 200) {
          this.activityList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数
    page(value) { //value就是要查询的那一页的页码
      this.getData(value);
    },

    //加载负责人
    loadOwner() {
      doGet("/api/user/owner", {}).then(resp => {
        if (resp.data.code === 200) {
          this.ownerOptions = resp.data.data;
        }
      })
    },

    //市场活动搜索
    onSearch() {
      this.getData(1);
    },

    //重置
    onReset() {
      this.activityQuery = {};
    },

    //查看详情
    view(id) {
      console.log(id);
      //跳转到该路由上
      this.$router.push("/dashboard/activity/detail/" + id);
      //$refs 、 $router
    },

    //录入市场活动
    add() {
      this.$router.push("/dashboard/activity/add");
    },

    //编辑市场活动
    edit(id) {
      this.$router.push("/dashboard/activity/edit/" + id);
    },

    //根据id删除市场活动
    del(id) {
      //提示用户，您确定要删除该数据吗？
      messageConfirm("您确定要删除该数据吗？").then(() => { //点“确定”就执行then()函数
        doDelete("/api/activity/" + id, {}).then(ttt => {
          //then里面取结果，这个结果对象可以使用任何名字，不一定要使用过resp，我们此处使用的就是ttt
          if (ttt.data.code === 200) {
            messageTip("删除成功", "success");
            //刷新一下，局部刷新
            this.reload();
          } else {
            messageTip("删除失败，原因：" + ttt.data.msg, "error");
          }
        })
      }).catch(() => { //点“取消”就执行catch()函数
        messageTip("取消删除", "warning");
      })
    },

    //批量删除
    batchDel() {
      if (this.activityIdArray.length <= 0) {
        //没有选择数据，提示一下用户
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      //提示用户，您确定要删除这些数据吗？
      messageConfirm("您确定要删除这些数据吗？").then(() => { //点“确定”就执行then()函数
        // ids = "1,3,5,6,11,13,16";
        let ids = this.activityIdArray.join(",");
        doDelete("/api/activity", {
          ids : ids
        }).then(ttt => {
          //then里面取结果，这个结果对象可以使用任何名字，不一定要使用过resp，我们此处使用的就是ttt
          if (ttt.data.code === 200) {
            messageTip("批量删除成功", "success");
            //刷新一下，局部刷新
            this.reload();
          } else {
            messageTip("批量删除失败，原因：" + ttt.data.msg, "error");
          }
        })
      }).catch(() => { //点“取消”就执行catch()函数
        messageTip("取消批量删除", "warning");
      })
    },

    //用户在table表格中勾选或者取消勾选时，会触发执行该函数
    handleSelectionChange(rowItemArray) {
      this.activityIdArray = [];
      rowItemArray.forEach( rowItem => {
        this.activityIdArray.push(rowItem.id);
      })
    }
  }
}
</script>

<style scoped>
.el-form {
  margin-bottom: 10px;
}
.el-table {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>